<template>
  <div class="about">
    <div class="page-header">
      <h1>{{ $t('about.title') }}</h1>
      <p>{{ $t('about.subtitle') }}</p>
    </div>

    <!-- 公司介绍 -->
    <div class="company-intro">
      <div class="intro-content">
        <div class="intro-text">
          <h2>{{ $t('about.company.title') }}</h2>
          <p>{{ $t('about.company.description') }}</p>
          <div class="company-stats">
            <div class="stat-item">
              <div class="stat-number">5+</div>
              <div class="stat-label">{{ $t('about.company.years') }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">1000+</div>
              <div class="stat-label">{{ $t('about.company.students') }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">95%</div>
              <div class="stat-label">{{ $t('about.company.successRate') }}</div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- 我们的使命 -->
    <div class="mission-section">
      <h2>{{ $t('about.mission.title') }}</h2>
      <div class="mission-grid">
        <div class="mission-card">
          <div class="mission-icon">
            <el-icon :size="40"><Aim /></el-icon>
          </div>
          <h3>{{ $t('about.mission.vision.title') }}</h3>
          <p>{{ $t('about.mission.vision.description') }}</p>
        </div>
        <div class="mission-card">
          <div class="mission-icon">
            <el-icon :size="40"><Flag /></el-icon>
          </div>
          <h3>{{ $t('about.mission.mission.title') }}</h3>
          <p>{{ $t('about.mission.mission.description') }}</p>
        </div>
        <div class="mission-card">
          <div class="mission-icon">
            <el-icon :size="40"><Star /></el-icon>
          </div>
          <h3>{{ $t('about.mission.values.title') }}</h3>
          <p>{{ $t('about.mission.values.description') }}</p>
        </div>
      </div>
    </div>

    <!-- 我们的服务 -->
    <div class="services-section">
      <h2>{{ $t('about.services.title') }}</h2>
      <div class="services-grid">
        <div class="service-card" v-for="service in services" :key="service.id">
          <div class="service-icon">
            <el-icon :size="32"><component :is="service.icon" /></el-icon>
          </div>
          <h3>{{ service.title }}</h3>
          <p>{{ service.description }}</p>
        </div>
      </div>
    </div>

    <!-- 团队介绍 -->
    <div class="team-section">
      <h2>{{ $t('about.team.title') }}</h2>
      <div class="team-grid">
        <div class="team-member" v-for="member in teamMembers" :key="member.id">
          <div class="member-avatar">
            <el-avatar :size="80" :src="member.avatar" />
          </div>
          <h3>{{ member.name }}</h3>
          <p class="member-position">{{ member.position }}</p>
          <p class="member-description">{{ member.description }}</p>
        </div>
      </div>
    </div>

    <!-- 联系我们 -->
    <div class="contact-section">
      <h2>{{ $t('about.contact.title') }}</h2>
      <div class="contact-content">
        <div class="contact-info">
          <div class="contact-item">
            <el-icon :size="24"><Location /></el-icon>
            <div>
              <h4>地址</h4>
              <p>江苏省无锡市江阴市长山大道55号A2栋7层</p>
            </div>
          </div>
          <div class="contact-item">
            <el-icon :size="24"><Phone /></el-icon>
            <div>
              <h4>电话</h4>
              <p>+86-17016303333</p>
            </div>
          </div>
          <div class="contact-item">
            <el-icon :size="24"><Message /></el-icon>
            <div>
              <h4>邮箱</h4>
              <p>82880268@qq.com</p>
            </div>
          </div>
        </div>
        <div class="contact-map">
          <div class="map-placeholder">
            <el-icon :size="48"><Location /></el-icon>
            <p>地图位置</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { 
  Aim, 
  Flag, 
  Star, 
  Document, 
  VideoPlay, 
  User, 
  Briefcase,
  Location,
  Phone,
  Message
} from '@element-plus/icons-vue'

const { t } = useI18n()

// 服务数据
const services = ref([
  {
    id: 1,
    title: t('about.services.exam.title'),
    description: t('about.services.exam.description'),
    icon: 'Document'
  },
  {
    id: 2,
    title: t('about.services.materials.title'),
    description: t('about.services.materials.description'),
    icon: 'Document'
  },
  {
    id: 3,
    title: t('about.services.videos.title'),
    description: t('about.services.videos.description'),
    icon: 'VideoPlay'
  },
  {
    id: 4,
    title: t('about.services.jobs.title'),
    description: t('about.services.jobs.description'),
    icon: 'Briefcase'
  },
  {
    id: 5,
    title: t('about.services.training.title'),
    description: t('about.services.training.description'),
    icon: 'User'
  },
  {
    id: 6,
    title: t('about.services.support.title'),
    description: t('about.services.support.description'),
    icon: 'User'
  }
])

// 团队成员数据
const teamMembers = ref([
  {
    id: 1,
    name: '田中 太郎',
    position: t('about.team.ceo'),
    description: t('about.team.ceoDesc'),
    avatar: 'https://via.placeholder.com/80x80/409EFF/ffffff?text=田中'
  },
  {
    id: 2,
    name: '佐藤 花子',
    position: t('about.team.cto'),
    description: t('about.team.ctoDesc'),
    avatar: 'https://via.placeholder.com/80x80/67C23A/ffffff?text=佐藤'
  },
  {
    id: 3,
    name: '山田 次郎',
    position: t('about.team.director'),
    description: t('about.team.directorDesc'),
    avatar: 'https://via.placeholder.com/80x80/E6A23C/ffffff?text=山田'
  },
  {
    id: 4,
    name: '高桥 美咲',
    position: t('about.team.manager'),
    description: t('about.team.managerDesc'),
    avatar: 'https://via.placeholder.com/80x80/F56C6C/ffffff?text=高桥'
  }
])
</script>

<style scoped>
.about {
  padding: 20px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 60px;
}

.page-header h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 10px;
}

.page-header p {
  font-size: 1.1rem;
  color: #666;
}

.company-intro {
  background: white;
  padding: 60px 0;
  margin-bottom: 60px;
}

.intro-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 0 20px;
}

.intro-text h2 {
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 20px;
}

.intro-text p {
  font-size: 1.1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30px;
}

.company-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 0.9rem;
}

.intro-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.mission-section {
  padding: 60px 0;
  background: #f8f9fa;
}

.mission-section h2 {
  text-align: center;
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 40px;
}

.mission-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 0 20px;
}

.mission-card {
  background: white;
  padding: 40px 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.mission-card:hover {
  transform: translateY(-5px);
}

.mission-icon {
  color: #409EFF;
  margin-bottom: 20px;
}

.mission-card h3 {
  font-size: 1.3rem;
  color: #2c3e50;
  margin-bottom: 15px;
}

.mission-card p {
  color: #666;
  line-height: 1.6;
}

.services-section {
  padding: 60px 0;
}

.services-section h2 {
  text-align: center;
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 40px;
}

.services-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  padding: 0 20px;
}

.service-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-3px);
}

.service-icon {
  color: #409EFF;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 1.2rem;
  color: #2c3e50;
  margin-bottom: 15px;
}

.service-card p {
  color: #666;
  line-height: 1.6;
}

.team-section {
  padding: 60px 0;
  background: #f8f9fa;
}

.team-section h2 {
  text-align: center;
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 40px;
}

.team-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  padding: 0 20px;
}

.team-member {
  background: white;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.member-avatar {
  margin-bottom: 20px;
}

.team-member h3 {
  font-size: 1.2rem;
  color: #2c3e50;
  margin-bottom: 8px;
}

.member-position {
  color: #409EFF;
  font-weight: 500;
  margin-bottom: 15px;
}

.member-description {
  color: #666;
  line-height: 1.6;
  font-size: 0.9rem;
}

.contact-section {
  padding: 60px 0;
}

.contact-section h2 {
  text-align: center;
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 40px;
}

.contact-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 0 20px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.contact-item .el-icon {
  color: #409EFF;
  margin-top: 5px;
}

.contact-item h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 1.1rem;
}

.contact-item p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

.contact-map {
  background: #f0f0f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.map-placeholder {
  text-align: center;
  color: #999;
}

.map-placeholder p {
  margin-top: 15px;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .intro-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .company-stats {
    justify-content: center;
  }
  
  .mission-grid,
  .services-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
</style> 